<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>统计数据</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<fieldset class="table-search-fieldset" style="border-radius: 20px;">

					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">培训时间</label>
									<div class="layui-input-inline">
										<input type="text" class="layui-input" id="trainDate" placeholder="yyyy-MM-dd">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">讲师</label>
									<div class="layui-input-inline">
										<input type="text" name="teacher" autocomplete="off" class="layui-input"
											placeholder="请输入讲师">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">培训标签</label>
									<div class="layui-input-inline">
										<select name="flag" lay-filter="sex">
											<option value="">~请选择培训标签~</option>
											<option value="0">安全体系类</option>
											<option value="1">生产技能类</option>
											<option value="2">人员管理类</option>
											<option value="3">生成素质类</option>

										</select>
									</div>
								</div>


								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit
										lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
									<button type="reset" class="layui-btn layui-btn-primary" lay-submit
										lay-filter="data-search-btn"><i class="layui-icon"></i> 重 置</button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div class="layui-card-body">
							<!--图表一和图表二-->
							<div class="layui-row layui-col-space15">
								<div class="layui-col-md6">
									<div class="layui-card"
										style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
										<div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i
												class="fa fa-pie-chart"></i>&nbsp;&nbsp;统计每年各类培训费用支出</div>
										<div class="layui-card-body">
											<div id="main" style="width: 100%; height: 400px;"></div>
										</div>
									</div>
								</div>
								<div class="layui-col-md6">
									<div class="layui-card"
										style="border-radius: 20px; border: 2px solid buttonface; box-shadow: 0px 0px 10px 3px gainsboro;">
										<div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i
												class="fa fa-pie-chart"></i>统计讲师课时费用支出</div>
										<div class="layui-card-body">
											<div id="main1" style="width: 100%; height: 400px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/echarts.min.js"></script>
		<script>
			layui.use(['form', 'laydate'], function() {
				var $ = layui.jquery,
					form = layui.form,
					laydate = layui.laydate;


				laydate.render({
					elem: '#trainDate'
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var result = JSON.stringify(data.field);
					layer.alert(result, {
						title: '最终的搜索信息'
					});


					return false;
				});
				var a = echarts.init(document.getElementById('main'), 'walden');
				var option = {
					legend: {},
					tooltip: {},
					dataset: {
						dimensions: ['product', '2019', '2020', '2021'],
						source: [{
								product: '专业技术',
								2019: 43.3,
								2020: 85.8,
								2021: 93.7
							},
							{
								product: '销售技巧',
								2019: 83.1,
								2020: 73.4,
								2021: 55.1
							},
							{
								product: '质量测试',
								2019: 86.4,
								2020: 65.2,
								2021: 82.5
							},
							{
								product: '行政管理',
								2019: 72.4,
								2020: 53.9,
								2021: 39.1
							}
						]
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {},
					// Declare several bar series, each will be mapped
					// to a column of dataset.source by default.
					series: [{
						type: 'bar'
					}, {
						type: 'bar'
					}, {
						type: 'bar'
					}],

				};
				a.setOption(option);

				//图表二
				var myChart = echarts.init(document.getElementById('main1'), 'walden');
				setTimeout(function() {
					var option = {
						legend: {},
						tooltip: {
							trigger: 'axis',
							showContent: false
						},
						dataset: {
							source: [
								['product', '2017', '2018', '2019', '2020', '2021'],
								['王老师', 56.5, 82.1, 88.7, 70.1, 53.4],
								['吴老师', 51.1, 51.4, 55.1, 53.3, 73.8],
								['李老师', 40.1, 62.2, 69.5, 36.4, 45.2],
								['圣老师', 25.2, 37.1, 41.2, 18, 33.9],
								['徐老师', 32.1, 52.2, 69.5, 36.4, 45.2]

							]
						},
						xAxis: {
							type: 'category'
						},
						yAxis: {
							gridIndex: 0
						},
						grid: {
							top: '55%'
						},
						series: [{
								type: 'line',
								smooth: true,
								seriesLayoutBy: 'row',
								emphasis: {
									focus: 'series'
								}
							},
							{
								type: 'line',
								smooth: true,
								seriesLayoutBy: 'row',
								emphasis: {
									focus: 'series'
								}
							},
							{
								type: 'line',
								smooth: true,
								seriesLayoutBy: 'row',
								emphasis: {
									focus: 'series'
								}
							},
							{
								type: 'line',
								smooth: true,
								seriesLayoutBy: 'row',
								emphasis: {
									focus: 'series'
								}
							},
							{
								type: 'pie',
								id: 'pie',
								radius: '30%',
								center: ['50%', '25%'],
								emphasis: {
									focus: 'self'
								},
								label: {
									formatter: '{b}: {@2012} ({d}%)'
								},
								encode: {
									itemName: 'product',
									value: '2012',
									tooltip: '2012'
								}
							}
						]
					};
					myChart.on('updateAxisPointer', function(event) {
						const xAxisInfo = event.axesInfo[0];
						if (xAxisInfo) {
							const dimension = xAxisInfo.value + 1;
							myChart.setOption({
								series: {
									id: 'pie',
									label: {
										formatter: '{b}: {@[' + dimension + ']} ({d}%)'
									},
									encode: {
										value: dimension,
										tooltip: dimension
									}
								}
							});
						}
					});
					myChart.setOption(option);
				});


			});
		</script>

	</body>
</html>